<template>
  <div
    style="display: flex; justify-content: space-between; position: relative"
  >
    <div>
      <!-- 分页 -->
      <el-button-group>
        <el-button style="width: 10px" @click="sha(1)">
          <el-icon><DArrowLeft /></el-icon>
        </el-button>
        <el-button style="width: 10px" @click="sha(-1)">
          <el-icon><ArrowLeft /></el-icon>
        </el-button>
        <el-button @click="show3 ? show3 = false: show3 = true">
          第{{ page }}页/共{{ total }}页
          <el-icon><CaretBottom /></el-icon>
        </el-button>
        <el-button style="width: 10px" @click="xia">
          <el-icon><ArrowRight /></el-icon>
        </el-button>
        <el-button
          style="width: 10px"
          @click="load(total)"
        >
          <el-icon><DArrowRight /></el-icon>
        </el-button>
      </el-button-group>
      &nbsp;
      <el-button @click="logg()">
        <el-icon color="#000" size="20"><Refresh /></el-icon>
      </el-button>
    </div>
    <div>
      共记录{{ lists }}条&nbsp;每页
      <input
        ref="myInput"
        value="2"
        :onblur="pagesum"
        type="number"
        style="
          width: 35px;
          text-align: center;
          height: 22px;
          border: 1px #dddddd solid;
          margin: 0px 2px;
          font-size: 12px;
        "
      />
      条
    </div>
    <div v-show="show3" class="pagelist">
      <p
        v-for="i in total"
        :key="i"
        :class="i == page ? 'active' : ''"
        @click="adpage(i)"
      >
        第{{ i }}页
      </p>
    </div>
  </div>
</template>
    
<script setup>
import { DArrowLeft, ArrowLeft, ArrowRight, DArrowRight, CaretBottom, Refresh } from "@element-plus/icons-vue";
import {ref, computed} from "vue"
const props = defineProps({
  page:{
    type: Number
  },
  pageSize:{
    type: Number
  },
  total:{
    type: Number
  },
  list:{
    type: Number,
    default: 10
  },
  lists:{
    type: Number,
    default: 10
  },
  sha:{
    type: Function,
    default: ()=>{}
  },
  xia:{
    type: Function,
    default: ()=>{}
  },
  load:{
    type: Function,
    default: ()=>{}
  },
  setpageSize:{
    type: Function,
    default: ()=>{}
  },
  setlodding:{
    type: Function,
    default: ()=>{}
  }
})

const show3 = ref(false);
const myInput = ref(null);
console.log(props.list.length)
// 分页
const pagesum = (e) => {
  if (e.target.value < 1) {
    myInput.value.value = props.pageSize
    return;
  } else if (e.target.value > props.list.length) {
    myInput.value.value = props.list.length;
    props.setpageSize(props.list.length)
  } else {
    props.setpageSize(e.target.value)
  }
  show3.value = false;
};
const sha = (i) => {
  if (props.page > 1) {
    props.sha(i)
  }
};
const xia = () => {
  if (props.page < props.total) {
    props.xia()
  }
};
const adpage = (i) => {
  show3.value = false;
  props.sha(i)
};

const list = computed(() => {
  let start = (props.page - 1) * props.pageSize;
  let end = props.page * props.pageSize;
  return props.list.slice(start, end);
});

const logg = ()=>{
  props.setlodding()
}
</script>
    
<style scoped>
@import url(../style/zcss.css);
</style>